<script lang="ts" setup>
	import * as im from '@/common/im.js';
	import { ref } from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	let router = useRouter()
	let props = defineProps(['listData'])
	let emits = defineEmits(['closeOrder', 'nowPay', 'kefu', 'confirmShou', 'jihuan', 'pingjia', 'closeShou', 'tuiDetail', 'deleteOrder'])
	const routerLink = (e, item) => {
		router.push({
			name: e,
			params: {
				item: JSON.stringify(item)
			}
		})
	}
	let modalShow = ref(false)
	console.log(props.listData, "打印data")
	const closeOrder = (id) => {
		//取消订单
		emits('closeOrder', {
			id
		})
	}
	const deleteOrder = (id) => {
		//删除订单
		emits('deleteOrder', {
			id
		})
	}
	const nowPay = (url) => {
		//立即支付
		emits('nowPay', {
			url
		})
	}
	const kefu = (id) => {
		//联系客服
		// console.log('state.detailsData', state.detailsData);
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'customerService',
			toUserId: id,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif



	}

	const confirmShou = (id) => {
		//确认收货
		emits('confirmShou', {
			id
		})
	}
	const jihuan = (id, item) => {
		//寄还

		// emits('jihuan', {
		// 	id,
		// 	item
		// })
		// let a = encodeURIComponent(JSON.stringify(item))
		// uni.navigateTo({
		// 	url: `pages/myOrder/applyForJihuan/applyForJihuan`
		// })
		router.push({
			name: 'applyForJihuan',
			params: {
				id: id,
				// item: JSON.stringify(item),
				all: 1
			}

		})
	}
	const pingjia = (id) => {
		//评价
		emits('pingjia', {
			id
		})
	}
	const closeShou = (id) => {
		//取消售后
		emits('closeShou', {
			id
		})
	}
	const tuiDetail = (id) => {
		//退款详情
		emits('tuiDetail', {
			id
		})
	}
	let wuliuItem = ref()
	const copy = (e) => {
		uni.setClipboardData({
			data: e,
			success: function () {
				console.log('success');
			}
		});
	}
</script>
<template>
	<view class="boxAll" v-for="(item,index) in props.listData" :key="index" @click="routerLink('orderDetail',item)">
		<view class="title">
			<view class="titLeft">
				<!-- <image src="../../static/logo.png" mode=""></image> -->
				<text>{{item.storeName}}</text>
				<view class="" v-if="item.storeName">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<text v-if="item.status == 1">待付款</text>
			<text v-if="item.status == 2">待发货</text>
			<text v-if="item.status == 3">待收货</text>

			<text v-if="item.status == 4&&item.sendbackStatus==1">申请寄还中</text>
			<text v-if="item.status == 4&&item.sendbackStatus==2">已同意寄还</text>
			<text v-if="item.status == 4&&item.sendbackStatus==3">已寄回</text>
			<text v-if="item.status == 4&&item.sendbackStatus==4">已寄还</text>
			<text v-if="item.status == 4&&item.sendbackStatus==5">寄还失败</text>
			<text v-if="item.status == 4&&item.sendbackStatus==-1">取消寄还</text>
			<text v-if="item.status == 4&&item.sendbackStatus==-2">已拒绝寄还</text>
			<text v-if="item.status == 6">寄还成功</text>

			<text v-if="item.status == 4&&item.sendbackStatus==0&&item.refundStatus==0">待评价</text>
			<text v-if="item.status == 5">已评价</text>
			<!-- <text v-if="item.status == -1">售后中</text> -->
			<text v-if="item.status == -2">订单已关闭</text>

			<text v-if="item.status==-1&&item.refundStatus==1">申请中</text>
			<text v-if="item.status==-1&&item.refundStatus==2">已同意</text>
			<text v-if="item.status==-1&&item.refundStatus==3">已寄回</text>
			<text v-if="item.status==-1&&item.refundStatus==4">已退款</text>
			<text v-if="item.status==-1&&item.refundStatus==5">退款失败</text>
			<text v-if="item.status==-1&&item.refundStatus==-1">取消售后</text>
			<text v-if="item.status==-1&&item.refundStatus==-2">已拒绝申请</text>
		</view>
		<view class="con" v-for="(item2,index2) in item.orderInfoList" :key="index">
			<image class="conL"
				:src="item2.sku!=null?item2.sku.logo:item.orderType!=2?item2.info.image:JSON.parse(item2.info.images)[0].url"
				mode=""></image>
			<view class="conR">
				<view class="rl c-flex-center-start">
					<text class="u-line-1" style="font-size: 28rpx;font-weight: 500;">{{item2.productName}}</text>
					<text
						style="font-size: 24rpx;color: rgba(0,0,0,0.45);padding-left: 32rpx;margin-top: 14rpx;">规格：{{item2.sku!=null?item2.sku.specIdsName:''}}</text>
					<text style="font-size: 24rpx;color: rgba(0,0,0,0.45);margin-top: 34rpx;"
						v-if="item2.endTime">租期：{{ item2.startTime }}{{ item2.endTime }}</text>
				</view>
				<view class="rr">
					<text class="intFont"><text style="font-size: 20rpx;">￥</text>
						{{item2.sku!=null?item2.sku.price:''}}</text>
					<text>×{{item2.cartNum}}</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<!-- //代付款 -->
			<text class="btnn" v-if="item.status==1" @click.stop="closeOrder(item.id)">
				取消订单
			</text>
			<text class="btnn red" v-if="item.status==1" @click.stop="nowPay(item.payUrl)">
				立即支付
			</text>

			<!-- //待发货 -->
			<text class="btnn" v-if="item.status==2" @click.stop="kefu(item.storeUserId)">
				联系客服
			</text>

			<!-- //待收货 -->
			<text class="btnn" v-if="item.status==3" @click.stop="modalShow=true;wuliuItem=item">
				查看物流
			</text>
			<text class="btnn red" v-if="item.status==3" @click.stop="confirmShou(item.id)">
				确认收货
			</text>
			<text class="btnn red" v-if="item.status==-2" @click.stop="deleteOrder(item.id)">
				删除订单
			</text>
			<!-- //代寄还6 -->
			<text class="btnn red" v-if="item.status==4&&item.sendbackStatus==0&&item.orderType==1"
				@click.stop="jihuan(item.id,item)">
				寄还
			</text>

			<!-- //待评价 -->
			<text class="btnn red" v-if="item.status==4" @click.stop="routerLink('evaluate',item)">
				评价
			</text>
			<!-- <text class="btnn red" v-if="item.status==4" @click.stop="routerLink('choseAfterSale',item)">
				申请售后/申请售后在里面，外面没有
			</text> -->
			<!-- //售后 -->
			<text class="btnn" v-if="item.status==-1" @click.stop="closeShou(item.id)">
				取消申请
			</text>
			<text class="btnn" v-if="item.status==-1" @click.stop="routerLink('afterSaleDetail',item)">
				退款详情
			</text>

			<!-- 	
			<text class="btnn" v-if="item==1" @click.stop>
				寄还
			</text>
			<text class="btnn" v-if="item==2" @click.stop="routerLink('afterSaleDetail')">
				退款详情
			</text>
			<text class="btnn" v-if="item==1" @click.stop="routerLink('choseAfterSale')">
				申请售后
			</text>
			<text class="btnn" @click.stop="routerLink('evaluate')">
				评价
			</text>
			<text class="btnn" @click.stop="modalShow=true">
				查看物流
			</text> -->
		</view>
	</view>
	<u-modal :show="modalShow" title="物流单号" width="540rpx">
		<view style="font-size: 28rpx;font-weight: 400;color: rgba(0,0,0,0.45);text-align: center;">
			快递公司：{{ wuliuItem.deliveryName ||''}}；物流单号：{{ wuliuItem.deliveryId ||''}}，可复制号联系客服查询
		</view>
		<template #confirmButton>
			<view class="r-flex-between-center">
				<view style="width: 206rpx;height: 88rpx;line-height: 88rpx;background: rgba(255,255,255,0);border: 2rpx solid #CB645E;text-align: center;
					border-radius: 8rpx;font-size: 32rpx;font-weight: 500;color: #CB645E;" @click.stop="modalShow=false">
					关闭
				</view>
				<view
					style="width: 206rpx;height: 88rpx;line-height: 88rpx;background: #CB645E;border-radius: 8rpx;text-align: center;color: #fff;"
					@click="copy(wuliuItem.deliveryId)">
					复制单号
				</view>
			</view>
		</template>
	</u-modal>
</template>
<style lang="scss">
	.boxAll {
		box-sizing: border-box;
		margin: 32rpx auto;
		width: 686rpx;
		// height: 408rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;


		.title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);

			.titLeft {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.con {
			width: 100%;
			height: 176rpx;
			padding: 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.conL {
				width: 176rpx;
				height: 176rpx;
			}

			.conR {
				width: 426rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.rl {
					width: 338rpx;
					font-size: 28rpx;
				}

				.rr {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28rpx;
				}
			}
		}

		.btn {
			width: 100%;
			// height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btnn {
				font-size: 28rpx;
				padding: 12rpx 24rpx;
				border: 1rpx solid rgba(0, 0, 0, 0.25);
				border-radius: 10rpx;
				margin: 0 8rpx;
			}

			.red {
				border: 1rpx solid #F83D3D !important;
				color: #F83D3D;
			}

		}
	}
</style>